import { Link } from '@brillout/docpress'
import { JustAMiddleware } from '../../components'
import { projectInfo } from '../../utils'

If the tool you want to use isn't in the list of integration guides, you'll still most likely be able to use it.

Vike is versatile:
 - From an architectural perspective, <Link text="Vike only takes care of the frontend" href="/architecture" />: you keep control over the rest of your stack and architecture.
 - From a server perspective, Vike is <Link text="just a middleware" href="#server-side-tools" />: you can embed Vike into any server.
 - You can <Link text="disable SSR (i.e. use SPA/MPA)" href="/render-modes" /> and/or <Link text="pre-render" href="/pre-rendering" /> your pages to remove the need for a production server and deploy to a <Link text="static host" href="/static-hosts" /> instead.
 - You have full control over how pages are rendered, which means that you can use any <Link text="UI tool" href="#ui-tool" /> and any <Link text="client-side tool" href="#client-side-tools" />.

In principle, you should be able to use Vike with any tool you want.

> If you struggle integrating a tool, don't hesitate to <a href={projectInfo.githubDiscussions}>create a new GitHub Discussion</a>.


## UI tools

```js
// /renderer/+onRenderHtml.js
// Environment: server

import { escapeInject, dangerouslySkipEscape } from 'vike/server'
// This can be any UI framework (React, Vue, Solid, Svelte, ...)
import renderToHtml from 'some-ui-framework'

export { onRenderHtml }

async function onRenderHtml(pageContext) {
  // `Page` is the `export { Page }` of our +Page.js files;
  // Vike doesn't do anything with `Page` and just makes it available as
  // `pageContext.Page`; we can export any `Page` value we want and do whatever we want with it.
  const { Page } = pageContext

  // We control how we use our UI framework to render our pages to HTML
  const pageHtml = await renderToHtml(Page)

  // We control the entire HTML
  return escapeInject`<html>
    <body>
      <head>
        <!-- Some libraries recommend loading code from a CDN -->
        <script src="https://cdn.example.com/some-library/3.3.7/lib.min.js"></script>
      </head>
      <div id="root">
        ${dangerouslySkipEscape(pageHtml)}
      </div>
    </body>
  </html>`
}
```

```js
// /renderer/+onRenderClient.js
// Environment: browser

export { onRenderClient }

import { hydrateDom } from 'some-ui-framework'

async function onRenderClient(pageContext) {
  const { Page } = pageContext
  // We control how our pages are hydrated
  await hydrateDom(Page)
}
```

Since you control how your pages are rendered, you can use:
- Any UI framework (React 16, React 17, Vue 2, Vue 3, `petite-vue`, Svelte, Solid, Preact, ...)
- Any UI library (Vuex, Redux, Pinia, Relay, Apollo GraphQL, Recoil, ...)

Integrating a UI tool is usually only a matter of following its official installation guide.


## Client-side tools

```js
// /renderer/+onRenderClient.js
// Environment: browser

export { onRenderClient }

import { hydrateDom } from 'some-ui-framework'

// This is a good place to initialize error tracking such as Sentry or Bugsnag.
Sentry.init()
// And also for initializing a Service Worker.
navigator.serviceWorker.register(/* ... */)

async function onRenderClient(pageContext) {
  // Here we can integrate performance measurement tools, e.g. to measure hydration performance
  const { Page } = pageContext
  await hydrateDom(Page)
  init()
}

function init() {
  // After hydration we usually initialize vanilla JS component libraries, for example tooltips
  tooltip.init(document.querySelectorAll('.tooltip'))
  // Or some vanilla JS modal library
  $('.my-modals').modal()
}
```

You can use:
 - Any CSS framework (Tailwind CSS, Bulma, Bootstrap, Material Design, ...)
 - Any client-side library (Vanilla JS component libraries, Bugsnag, Sentry, jQuery, Google Analytics, ...)
 - Any browser technology (Service Workers, PWA, ...)

Integrating a client-side tool is usually only a matter of following its official installation guide.


## Server-side tools

<JustAMiddleware />

You can use:
- Any server framework (Express, Fastify, Hono, Nitro, HatTip, Koa, Hapi, ...)
- Any authentication strategy/tool (email/password, OAuth, Auth.js, Passport.js, Grant, Keycloak, Auth0, ...).
- Any serverless/edge environment (Cloudflare Workers, Vercel, Firebase, AWS Lambda, Google Cloud Functions, Deno Deploy, ...)
- Any virtual private server (AWS EC2, Google Cloud, ...)
- Any static host (Cloudflare Pages, GitHub Pages, Netlify, ...)

See also:
- <Link href="/renderPage" />
- <Link href="/express" />
- <Link href="/deno" />
- <Link href="/fastify" />
- <Link href="/hapi" />


## Examples

Official examples: [GitHub > `vikejs/vike` > `examples/`](https://github.com/vikejs/vike/tree/main/examples).

Beyond the official examples, many tools have community examples of being used with Vike &ndash; search this website (`CTRL+K`) for the tool you want an example of.

If an example is missing/outdated, contribution welcome to create/improve one.
